<template>
  <div id="main">
    <div class="header">客户拜访表</div>
    <el-form ref="form" v-loading="formLoading" :model="customer" :rules="rules" :disabled="form_disabled">
      <div class="title">客户基本信息</div>
      <table class="mailTable">
        <tr class="firstTr">
          <td class="column firstTd title_td">
            <span class="tip">*</span>项目名称
          </td>
          <td class="column">
            <el-form-item prop="name">
              <el-autocomplete
                v-model.trim="customer.name"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入项目名称"
                @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
          </td>
          <td class="column title_td">
            <span class="tip">*</span>客户行业
          </td>
          <td class="column">
            <el-form-item prop="industry_id">
              <el-select v-model="customer.industry_id" placeholder="请选择行业">
                <el-option
                  v-for="item in industry_dict"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </td>
          <td class="column firstTd title_td">
            <span class="tip">*</span>销售漏斗
          </td>
          <td class="column">
            <el-form-item prop="funnels">
              <el-select v-model="customer.funnels" multiple placeholder="请选择销售漏斗">
                <el-option
                  v-for="item in funnel_dict"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="column title_td firstTd">
            <span class="tip">*</span>所属集团
          </td>
          <td class="column">
            <el-form-item prop="group">
              <el-select v-model="customer.group" clearable placeholder="请选择所属集团" filterable>
                <el-option v-for="item in groupArr" :value="item.id" :key="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td class="column firstTd title_td">
            客户类型
          </td>
          <td class="column">
            <el-form-item prop="group">
              <el-select v-model="customer.type_id" clearable placeholder="请选择客户类型" filterable>
                <el-option v-for="item in customerTypes" :value="item.id" :key="item.id" :label="item.title"></el-option>
              </el-select>
            </el-form-item>
          </td>
          <td class="column title_td">
            <span class="tip">*</span>客户地址
          </td>
          <td class="column">
            <el-form-item prop="address">
              <el-input v-model.trim="customer.address" placeholder="请输入客户地址"/>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="column firstTd title_td">
            <span class="tip">*</span>维护人员
          </td>
          <td class="column">
            <el-form-item prop="maintenance_staff_id">
              <el-select v-model="customer.maintenance_staff_id" placeholder="请选择客户维护人员" style="width: 100%">
                <el-option
                  v-for="item in sale_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </td>
          <td class="column firstTd title_td">
            <span class="tip">*</span>客户负责人
          </td>
          <td class="column">
            <el-form-item prop="person_in_charge_id">
              <el-select v-model="customer.person_in_charge_id" placeholder="请选择客户负责人" style="width: 100%">
                <el-option
                  v-for="item in user_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.status === 0"
                />
              </el-select>
            </el-form-item>
          </td>
          <td class="column title_td">
            客户选择原因
          </td>
          <td class="column" colspan="2">
            <el-select v-model="customer.selection_reasons" multiple placeholder="请选择客户选择原因" style="width: 100%">
              <el-option
                v-for="item in select_reason_dict"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </td>
        </tr>
        <!--        <tr>-->
        <!--          <td class="column firstTd title_td">-->
        <!--            总负责人-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.person_in_charge_name" placeholder="请输入总负责人名称"></el-input>-->
        <!--          </td>-->
        <!--          <td class="column title_td">-->
        <!--            总负责人联系电话-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.person_in_charge_phone" placeholder="请输入总负责人联系电话"></el-input>-->
        <!--          </td>-->
        <!--        </tr>-->
        <!--        <tr>-->
        <!--          <td class="column firstTd title_td">-->
        <!--            总负责人部门-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.person_in_charge_dept" placeholder="请输入总负责人部门"></el-input>-->
        <!--          </td>-->
        <!--          <td class="column title_td">-->
        <!--            总负责人职位-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.person_in_charge_post" placeholder="请输入总负责人职位"></el-input>-->
        <!--          </td>-->
        <!--        </tr>-->
        <!--        <tr>-->
        <!--          <td class="column firstTd title_td">-->
        <!--            直接负责人-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.direct_responsible_person_name" placeholder="请输入直接负责人名称"></el-input>-->
        <!--          </td>-->
        <!--          <td class="column title_td">-->
        <!--            直接负责人联系电话-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.direct_responsible_person_phone" placeholder="请输入直接负责人联系电话"></el-input>-->
        <!--          </td>-->
        <!--        </tr>-->
        <!--        <tr>-->
        <!--          <td class="column firstTd title_td">-->
        <!--            直接负责人部门-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.direct_responsible_person_dept" placeholder="请输入直接负责人部门"></el-input>-->
        <!--          </td>-->
        <!--          <td class="column title_td">-->
        <!--            直接负责人职位-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.direct_responsible_person_post" placeholder="请输入直接负责人职位"></el-input>-->
        <!--          </td>-->
        <!--        </tr>-->
        <!--        <tr>-->
        <!--          <td class="column firstTd title_td">-->
        <!--            办事员(经办人)-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.clerk_name" placeholder="请输入办事员(经办人)名称"></el-input>-->
        <!--          </td>-->
        <!--          <td class="column title_td">-->
        <!--            办事员(经办人)联系电话-->
        <!--          </td>-->
        <!--          <td class="column" colspan="2">-->
        <!--            <el-input v-model.trim="customer.clerk_phone" placeholder="请输入办事员(经办人)联系电话"></el-input>-->
        <!--          </td>-->
        <!--        </tr>-->
        <!--        <tr>-->
        <!--          <td class="column firstTd title_td" colspan="2">-->
        <!--            客户公司权力架构分析（与我们业务相关的部门与人员划分，如入库、投放、报计划、财务等)-->
        <!--          </td>-->
        <!--          <td class="column textarea-box" colspan="4">-->
        <!--            <el-input-->
        <!--              type="textarea"-->
        <!--              rows="4"-->
        <!--              placeholder="请输入内容"-->
        <!--              v-model.trim="customer.company_structure_analysis"-->
        <!--            >-->
        <!--            </el-input>-->
        <!--          </td>-->
        <!--        </tr>-->
        <tr>
          <td class="column firstTd title_td" colspan="2">
            客户投放背景分析（投放周期、投放习惯、投放金额等)
          </td>
          <td class="column textarea-box" colspan="4">
            <el-input
              v-model.trim="customer.company_launch_background"
              type="textarea"
              rows="4"
              placeholder="请输入内容"
            />
          </td>
        </tr>
        <!--        <tr>-->
        <!--          <td class="column firstTd title_td" colspan="2">-->
        <!--            客户信息(客户生日、个人喜好、家庭成员生日或重要纪念日等)-->
        <!--          </td>-->
        <!--          <td class="column textarea-box" colspan="4">-->
        <!--            <el-input-->
        <!--              type="textarea"-->
        <!--              rows="4"-->
        <!--              placeholder="请输入内容"-->
        <!--              v-model.trim="customer.company_information"-->
        <!--            >-->
        <!--            </el-input>-->
        <!--          </td>-->
        <!--        </tr>-->
        <tr>
          <td class="column firstTd title_td" colspan="2">
            结合公司客户维护方案，制定该客户维护标准
          </td>
          <td class="column textarea-box" colspan="4">
            <el-input
              v-model.trim="customer.company_programme"
              type="textarea"
              rows="4"
              placeholder="请输入内容"
            />
          </td>
        </tr>
      </table>
      <!--客户联系人信息-->
      <div class="title">联系人信息</div>
      <div class="table_data">
        <el-button size="mini" type="primary" style="margin-bottom: 10px" @click="showLinkUserAdd">添加联系人</el-button>
        <el-table v-loading="linkUserTableLoading" :data="linkUserData" border style="width: 100%;margin: 0 auto">
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="150" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.can_look">{{ scope.row.name }}</span>
              <span v-else>{{ scope.row.name.charAt(0) }}**</span>
            </template>
          </el-table-column>
          <el-table-column label="级别" width="150" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.can_look">{{ scope.row.level }}</span>
              <span v-else>****</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" width="150" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.can_look">{{ scope.row.dept }}</span>
              <span v-else>****</span>
            </template>
          </el-table-column>
          <el-table-column label="职位" width="150" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.can_look">{{ scope.row.post }}</span>
              <span v-else>****</span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" min-width="150" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.can_look">{{ scope.row.phone }}</span>
              <span v-else>***********</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button-group v-if="scope.row.can_look">
                <el-button size="small" :disabled="false" @click="showLinkUserEdit(scope.row,scope.$index,false)">查看
                </el-button>
                <el-button type="primary" size="small" @click="showLinkUserEdit(scope.row,scope.$index,true)">编辑
                </el-button>
                <el-button type="danger" size="small" @click="removeLinkUser(scope.$index)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--客户联系人信息-->
      <div class="title">入库信息</div>
      <div class="table_data">
        <el-button size="mini" type="primary" style="margin-bottom: 10px" @click="showPutStorageAdd">新增入库信息</el-button>
        <el-table v-loading="putStorageTableLoading" :data="putStorageData" border style="width: 100%;margin: 0 auto">
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="company_head" label="抬头" width="200" align="center"></el-table-column>
          <el-table-column prop="website" label="网址" min-width="200" align="center"></el-table-column>
          <el-table-column prop="login_account" label="登录账号" width="150" align="center"></el-table-column>
          <el-table-column prop="password" label="密码" width="150" align="center"></el-table-column>
          <el-table-column prop="link_user" label="联系人" width="150" align="center"></el-table-column>
          <el-table-column prop="phone" label="联系电话" width="150" align="center"></el-table-column>
          <el-table-column prop="email" label="联系邮箱" min-width="150" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="showPutStorageEdit(scope.row,scope.$index)">编辑</el-button>
              <el-button type="danger" size="small" @click="removePutStorage(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="title">合作信息</div>
			<div class="table_data">
			  <el-table :data="customer.contractList || []" border style="width: 100%;margin: 0 auto">
			    <el-table-column type="index" label="序号" width="50" align="center">
			      <template slot-scope="scope">
			        <span>{{ scope.$index + 1 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column prop="month" label="合作年月" width="100" align="center"></el-table-column>
			    <el-table-column label="金额" width="300" align="center">
					<template slot-scope="scope">
					   {{scope.row.amount}} （{{scope.row.amountBig}}）
					</template>
				</el-table-column>
			    <el-table-column label="备注（合作资源明细或合作方案）" min-width="150" align="center">
						<template slot-scope="scope">
						  <div class="flex justify-center align-center flex-wrap">
							  <el-tag size="mini" v-for="item in scope.row.mediaCountList" style="margin: 0 3px 3px 0">
							    {{ item.name }}: {{item.num}}个
							  </el-tag>
								<el-tag size="mini" type="success" v-for="item in scope.row.proxyMediaCountList" style="margin: 0 3px 3px 0">
								  {{ item.name }}: {{item.num}}个
								</el-tag>
						  </div>
						</template>
					</el-table-column>
			  </el-table>
			</div>
<!--      <table class="mailTable">
        <tr class="firstTr">
          <td class="column firstTd">
            合作年月
          </td>
          <td class="column">
            金额
          </td>
          <td class="column" colspan="2">
            备注（合作资源明细或合作方案）
          </td>
        </tr>
        <tr>
          <td colspan="6" class="column firstTd">
            无数据
          </td>
        </tr>
      </table> -->
      <div class="title">历史沟通记录</div>
    </el-form>
    <div class="table_data">
      <el-table v-loading="tableLoading" :data="oldTableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="follow_time" label="跟进时间" width="150" align="center"></el-table-column>
        <el-table-column prop="opposite_person" label="对接人" width="150" align="center"></el-table-column>
        <el-table-column label="达成成果" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.achievements ? scope.row.achievements : '未填写' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="lookFollow(scope.row)">查看详细信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listParams.page"
        :page-sizes="[10, 20, 50, 100,200,500]"
        :page-size="listParams.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="!showCreateTAble" v-show="show_addBox" class="title">新增沟通记录列表</div>
    <div v-if="!showCreateTAble" v-show="show_addBox" class="button_group">
      <el-button size="mini" type="primary" @click="addTable">增加记录</el-button>
    </div>
    <div v-if="!showCreateTAble" v-show="show_addBox" style="width: 80%;margin: 0 auto 10px auto">
      <el-table :data="createTableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="follow_time" label="跟进时间" width="150" align="center"></el-table-column>
        <el-table-column prop="opposite_person" label="对接人" width="150" align="center"></el-table-column>
        <el-table-column label="达成成果" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.achievements ? scope.row.achievements : '未填写' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="lookFollow(scope.row)">查看详细信息</el-button>
            <el-button type="primary" size="small" @click="editFollow(scope.row,scope.$index)">编辑</el-button>
            <el-button type="danger" size="small" @click="removeTable(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="is_edit" style="text-align: center;margin-top:10px;margin-bottom: 20px">
      <el-tag type="danger">用户基本信息有修改</el-tag>
      <el-table :data="changeDataTable" style="width: 80%;margin: 10px auto" border>
        <el-table-column label="属性名称" width="250" align="center">
          <template slot-scope="scope">
            {{ scope.row.fieldName }}
          </template>
        </el-table-column>
        <el-table-column label="修改前数据" min-width="400" align="center" class-name="old_data">
          <template slot-scope="scope">
            <div v-html=" scope.row.beforeChangeData ? scope.row.beforeChangeData.replaceAll('|','<br/>') : '未填写'"
            ></div>
          </template>
        </el-table-column>
        <el-table-column prop="afterChangeData" label="修改后数据" min-width="400" align="center" class-name="new_data">
          <template slot-scope="scope">
            <div v-html="scope.row.afterChangeData ? scope.row.afterChangeData.replaceAll('|','<br/>') : '未填写'"></div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-bottom: 30px">
      <div v-if="((params || {}).handle_param || {}).id">
        <flowCheckHistory :flowType="((params || {}).handle_param || {}).flow_type"
                          :dataId="((params || {}).handle_param || {}).id"
        />
      </div>
      <!--客户报备-->
      <span slot="footer" class="custom-footer">
        <el-button icon="el-icon-back" @click="back()">返 回</el-button>
        <el-button v-if="!customer.whether_check&&!showCreateTAble" v-show="show_save" type="primary"
                   :disabled="form_disabled"
                   icon="el-icon-circle-plus-outline" @click="saveInfo()"
        >保存</el-button>
        <el-button v-if="!customer.whether_check&&!showCreateTAble" v-show="show_submit" type="primary"
                   :disabled="form_disabled"
                   icon="el-icon-circle-plus" @click="submit()"
        >提交</el-button>
        <el-button v-if="customer.whether_check" type="primary" :disabled="form_disabled&&!customer.whether_check"
                   icon="el-icon-success" @click="showDialog()"
        >通过</el-button>
        <el-button v-if="customer.whether_check" type="danger" :disabled="form_disabled&&!customer.whether_check"
                   icon="el-icon-error" @click="showDialog(false)"
        >驳回</el-button>
        <el-button v-if="show_remove" type="danger" icon="el-icon-circle-close" @click="remove()">删除</el-button>
        <el-button v-if="showActualDelete" type="danger" icon="el-icon-circle-close" @click="actualDelete()"
        >彻底删除</el-button>
      </span>
      <!--修改客户基本信息-->
      <span slot="footer" class="custom-footer">
        <el-button v-if="showCustomerEditSave" type="primary" icon="el-icon-circle-plus-outline" @click="saveDrafts">修改保存</el-button>
        <el-button v-if="showCustomerEditSubmit" type="primary" icon="el-icon-circle-plus" @click="editSubmit"
        >修改提交</el-button>
        <el-button v-if="showCustomerEditAdopt && editCanCheck" type="primary" icon="el-icon-success"
                   @click="showDialog(true,true)"
        >修改通过</el-button>
        <el-button v-if="showCustomerEditReject && editCanCheck" type="danger" icon="el-icon-error"
                   @click="showDialog(false,true)"
        >修改驳回</el-button>
        <el-button v-if="showCustomerEditRemove" type="danger" icon="el-icon-circle-close" @click="editRemove"
        >修改删除</el-button>
        <el-button v-if="showCustomerEditActualDelete" type="danger" icon="el-icon-circle-close"
                   @click="editActualDelete"
        >修改彻底删除</el-button>
      </span>
    </div>
    <el-dialog center width="15%" title="客户基本属性有修改，是否覆盖" :visible.sync="dialogVisible">
      <div class="button_box">
        <el-button size="small" type="primary" @click="check(false, false)">不覆盖</el-button>
        <el-button size="small" type="danger" @click="check(true, false)">覆盖</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--跟进信息表单对话框-->
    <add-customer-follow-dialog ref="addCustomerFollowDialog" :customer-id="tmpCustomerId"
                                :follow-form-visible="followFormVisible" :model="tmp_follow"
                                @close="followFormClose" @save="addFollow"
                                :can-edit="tmp_index === null || (tmp_index !== null && !tmp_follow.whether_remove) "
                                :form-disabled="tmp_index !== null && !tmp_follow.whether_remove"
                                :fill-user-arr="linkUserData"
    ></add-customer-follow-dialog>
    <!--    <el-dialog center width="80%" :title="tmp_index== null?'新增跟进信息':!tmp_follow.whether_remove?'查看跟进信息':'修改跟进信息'"-->
    <!--               :visible.sync="followFormVisible"-->
    <!--               @close="followFormClose"-->
    <!--    >-->
    <!--      <el-form ref="followForm" :model="tmp_follow" :rules="followRules">-->
    <!--        <div>-->
    <!--          <table class="mailTable" style="width: 90%">-->
    <!--            <tr class="firstTr">-->
    <!--              <td class="column firstTd title_td" style="width: 200px">-->
    <!--                <span class="tip">*</span>沟通日期-->
    <!--              </td>-->
    <!--              <td class="column">-->
    <!--                <el-form-item prop="follow_time">-->
    <!--                  <el-date-picker-->
    <!--                    v-model="tmp_follow.follow_time"-->
    <!--                    type="date"-->
    <!--                    placeholder="选择日期"-->
    <!--                    format="yyyy 年 MM 月 dd 日"-->
    <!--                    value-format="yyyy-MM-dd"-->
    <!--                    :disabled="!tmp_follow.whether_remove"-->
    <!--                    style="width: 100%"-->
    <!--                    size="mini"-->
    <!--                  />-->
    <!--                </el-form-item>-->
    <!--              </td>-->
    <!--              <td class="column title_td" style="width: 200px">-->
    <!--                <span class="tip">*</span>对接人-->
    <!--              </td>-->
    <!--              <td class="column">-->
    <!--                <el-form-item v-loading="contactSelectLoading" prop="opposite_person">-->
    <!--                  <el-select-->
    <!--                    v-model="tmp_follow.opposite_person"-->
    <!--                    filterable-->
    <!--                    style="width: 100%"-->
    <!--                    placeholder="请输入对接人名称"-->
    <!--                    :disabled="!tmp_follow.whether_remove"-->
    <!--                    size="mini"-->
    <!--                  >-->
    <!--                    <el-option-->
    <!--                      v-for="item in opposite_person_arr"-->
    <!--                      :key="item"-->
    <!--                      :value="item"-->
    <!--                    >-->
    <!--                    </el-option>-->
    <!--                  </el-select>-->
    <!--                </el-form-item>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr>-->
    <!--              <td class="column firstTd title_td" style="width: 200px">-->
    <!--                联系方式-->
    <!--              </td>-->
    <!--              <td class="column" colspan="3">-->
    <!--                <el-input-->
    <!--                  v-model.trim="tmp_follow.phone"-->
    <!--                  placeholder="请输入联系方式"-->
    <!--                  clearable-->
    <!--                  :disabled="!tmp_follow.whether_remove"-->
    <!--                  size="mini"-->
    <!--                />-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr>-->
    <!--              <td class="column title_td firstTd" style="width: 200px">-->
    <!--                推进动作-->
    <!--              </td>-->
    <!--              <td class="column">-->
    <!--                <el-select v-model="tmp_follow.advances" :disabled="!tmp_follow.whether_remove" multiple-->
    <!--                           placeholder="请选择" style="width: 100%" size="mini"-->
    <!--                >-->
    <!--                  <el-option-->
    <!--                    v-for="item in advances_dict"-->
    <!--                    :key="item.id"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.id"-->
    <!--                  />-->
    <!--                </el-select>-->
    <!--              </td>-->
    <!--              <td class="column title_td" style="width: 200px">-->
    <!--                推荐资源-->
    <!--              </td>-->
    <!--              <td class="column">-->
    <!--                <el-select v-model="tmp_follow.resources" :disabled="!tmp_follow.whether_remove" multiple-->
    <!--                           placeholder="请选择" style="width: 100%" size="mini"-->
    <!--                >-->
    <!--                  <el-option-->
    <!--                    v-for="item in resources_dict"-->
    <!--                    :key="item.id"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.id"-->
    <!--                  />-->
    <!--                </el-select>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr>-->
    <!--              <td class="column firstTd title_td" style="width: 200px" colspan="1">-->
    <!--                推荐理由-->
    <!--              </td>-->
    <!--              <td class="column textarea-box">-->
    <!--                <el-input-->
    <!--                  v-model.trim="tmp_follow.reasons_for_recommendation"-->
    <!--                  type="textarea"-->
    <!--                  rows="4"-->
    <!--                  placeholder="请输入内容"-->
    <!--                  :disabled="!tmp_follow.whether_remove"-->
    <!--                  size="mini"-->
    <!--                />-->
    <!--              </td>-->
    <!--              <td class="column firstTd title_td" colspan="1" style="width: 200px">-->
    <!--                <span class="tip">*</span>达成成果-->
    <!--              </td>-->
    <!--              <td class="column textarea-box">-->
    <!--                <el-form-item prop="achievements">-->
    <!--                  <el-input-->
    <!--                    v-model.trim="tmp_follow.achievements"-->
    <!--                    type="textarea"-->
    <!--                    rows="4"-->
    <!--                    placeholder="请输入内容"-->
    <!--                    :disabled="!tmp_follow.whether_remove"-->
    <!--                    size="mini"-->
    <!--                  />-->
    <!--                </el-form-item>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--          </table>-->
    <!--        </div>-->
    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="followFormVisible = false">关闭</el-button>-->
    <!--        <el-button v-if="tmp_follow.whether_remove" type="primary" @click="addFollow">保存</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
    <el-dialog title="审批意见" :visible.sync="dialogFormVisible" width="500px" @close="checkDialogClose">
      <el-form :model="form">
        <el-form-item label-width="0">
          <el-input v-model="form.opinion" type="textarea" :rows="5"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :type="is_adopt?'primary':'danger'" @click="dialogCheck">{{ is_adopt ? '通过' : '驳回' }}</el-button>
      </div>
    </el-dialog>
    <!--添加联系人弹出框-->
    <el-dialog :title="linkUserEdit?flag?'编辑联系人':'查看联系人':'新增联系人'" :visible.sync="linkUserDialogVisible" width="70%"
               center @close="closeLinkUserDialog"
    >
      <el-form ref="linkUserForm" :disabled="!flag" :model="linkUser" :rules="linkUserFormRules">
        <table class="mailTable" style="width: 90%">
          <tr class="firstTr">
            <td class="column firstTd">
              <span class="tip">*</span>名称
            </td>
            <td class="column">
              <el-form-item prop="name">
                <el-input v-model="linkUser.name" placeholder="请输入名称"></el-input>
              </el-form-item>
            </td>
            <td class="column">
              级别
            </td>
            <td class="column">
              <el-select v-model="linkUser.level" placeholder="请选择级别">
                <el-option value="总负责人"></el-option>
                <el-option value="直接负责人"></el-option>
                <el-option value="办事员"></el-option>
              </el-select>
            </td>
            <td class="column">
              <span class="tip">*</span>联系电话
            </td>
            <td class="column">
              <el-form-item prop="phone">
                <el-input v-model="linkUser.phone" placeholder="请输入联系电话"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd">
              部门
            </td>
            <td class="column">
              <el-input v-model="linkUser.dept" placeholder="请输入部门"></el-input>
            </td>
            <td class="column">
              职务
            </td>
            <td class="column">
              <el-input v-model="linkUser.post" placeholder="请输入职务"></el-input>
            </td>
            <td class="column">
              生日
            </td>
            <td class="column">
              <el-date-picker v-model="linkUser.birthday" type="date" style="width: 100%" placeholder="请选择日期"
                              value-format="yyyy-MM-dd"
                              format="yyyy 年 MM 月 dd 日"
              ></el-date-picker>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd" colspan="2">
              个人喜好
            </td>
            <td class="column textarea-box" colspan="4">
              <el-input v-model="linkUser.hobbies" type="textarea" :rows="4" placeholder="请输入个人喜好"></el-input>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd" colspan="2">
              家庭成员生日或重要纪念日
            </td>
            <td class="column textarea-box" colspan="4">
              <el-input v-model="linkUser.commemoration_day" type="textarea" :rows="4" placeholder="请输入家庭成员生日或重要纪念日"
              ></el-input>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd" colspan="2">
              备注
            </td>
            <td class="column textarea-box" colspan="4">
              <el-input v-model="linkUser.remark" type="textarea" :rows="4" placeholder="请输入备注"></el-input>
            </td>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="linkUserDialogVisible = false">关 闭</el-button>
        <el-button v-show="flag||!linkUserEdit" type="primary" @click="saveLinkUser">保 存</el-button>
      </span>
    </el-dialog>
    <!--添加入库信息弹出框-->
    <el-dialog :title="putStorageEdit?'编辑入库信息':'新增入库信息'" :visible.sync="putStorageDialogVisible" width="70%" center
               @close="closePutStorageDialog"
    >
      <el-form ref="putStorageForm" class="putStorageForm" :model="putStorage" :rules="putStorageFormRules">
        <table class="mailTable" style="width: 90%">
          <tr class="firstTr">
            <td class="column firstTd" colspan="2">
              <span class="tip">*</span>网址
            </td>
            <td class="column" colspan="4">
              <el-form-item prop="website">
                <el-input v-model="putStorage.website" placeholder="请输入网址"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="column firstTd">
              <span class="tip">*</span>抬头
            </td>
            <td class="column">
              <el-form-item prop="company_head">
                <el-select v-model="putStorage.company_head" placeholder="请选择公司">
                  <el-option v-for="item in companyArr" :key="item.id" :label="item.head" :value="item.head">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td class="column">
              <span class="tip">*</span>登录账号
            </td>
            <td class="column">
              <el-form-item prop="login_account">
                <el-input v-model="putStorage.login_account" placeholder="请输入登录账号"></el-input>
              </el-form-item>
            </td>
            <td class="column">
              <span class="tip">*</span>密码
            </td>
            <td class="column">
              <el-form-item prop="password">
                <el-input v-model="putStorage.password" placeholder="请输入登录密码"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd">
              联系人名称
            </td>
            <td class="column">
              <el-input v-model="putStorage.link_user" placeholder="请输入联系人名称"></el-input>
            </td>
            <td class="column">
              电话
            </td>
            <td class="column">
              <el-input v-model="putStorage.phone" placeholder="请输入电话"></el-input>
            </td>
            <td class="column">
              邮箱
            </td>
            <td class="column">
              <el-input v-model="putStorage.email" placeholder="请输入邮箱"></el-input>
            </td>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putStorageDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePutStorage">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import {
  actualDelete,
  check,
  equalsData,
  getFlowIsEnd,
  one as getCustomerFlowInfo,
  remove,
  save,
  saveAndStartFlow
} from '@/api/customer/customerFlow'
import {listAll as listCustomerTypes} from '@/api/customerLevel'
import { getContactById, one as getCustomerInfo, querySearch } from '@/api/customer/customer'
import { page as getFollowTmpList } from '@/api/customer/customerFollowTmp'
import { page as getFollowList } from '@/api/customer/customerFollow'
import {
  actualDelete as editActualDelete,
  check as editCheck,
  one as getEditInfo,
  remove as editRemove,
  saveAndStartFlow as editSaveAndStartFlow,
  saveDrafts
} from '@/api/customer/customerEdit'
import { get_company } from '@/api/system/department'
import flowCheckHistory from '@/components/FlowCheckHistory'
import { allList } from '@/api/system/user'
import AddCustomerFollowDialog from '@/views/business/customer/components/AddCustomerFollowDialog'
import { cloneDeep } from 'lodash'

export default {
  name: 'Index',
  data() {
    return {
      formLoading: false,
      customer: {
        id: null,
        name: null,
        address: null,
        brand: null,
        industry_id: null,
        type_id: null,
        budget: null,
        maintenance_staff_id: null,
        person_in_charge_id: null,
        // 总负责人信息
        person_in_charge_name: null,
        person_in_charge_phone: null,
        person_in_charge_dept: null,
        person_in_charge_post: null,
        // 直接负责人信息
        direct_responsible_person_name: null,
        direct_responsible_person_phone: null,
        direct_responsible_person_dept: null,
        direct_responsible_person_post: null,
        // 经办人信息
        clerk_name: null,
        clerk_phone: null,
        selection_reasons: [],
        funnels: [],
        company_structure_analysis: null,
        company_launch_background: null,
        company_information: null,
        company_programme: null,
        follows: [],
        whether_check: false,
        contact_modify: 0,
        put_storage_modify: 0,
        group: null
      },
      industry_dict: [], // 行业字典
      funnel_dict: [], // 销售漏斗字典
      select_reason_dict: [], // 选择原因字典
      sale_list: [], // 销售集合
      user_list: [],
      resources_dict: [], // 资源字典
      advances_dict: [], // 推进动作
      tmpDate: null,
      tmpMoney: null,
      tmpRemarks: null,
      opposite_person_arr: [],
      rules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入客户地址', trigger: 'blur' }
        ],
        group: [
          { required: true, message: '请选择所属集团', trigger: 'change' }
        ],
        funnels: [
          { type: 'array', required: true, message: '请选择客户漏斗', trigger: 'change' }
        ],
        industry_id: [
          { type: 'number', required: true, message: '请选择客户所属行业', trigger: 'change' }
        ],
        type_id: [
          { type: 'number', required: true, message: '请选择客户类型', trigger: 'change' }
        ],
        brand: [
          { required: true, message: '请输入客户品牌', trigger: 'blur' }
        ],
        // 维护人员
        maintenance_staff_id: [
          { type: 'number', required: true, message: '请选择维护人员', trigger: 'change' }
        ],
        person_in_charge_id: [
          { type: 'number', required: true, message: '请选择负责人', trigger: 'change' }
        ]
        // budget: [
        //   { type: 'number', message: '金额必须为数字值' }
        // ]
      },
      created: 1,
      dialogVisible: false,
      form_disabled: true,
      showCreateTAble: true,
      listParams: {
        page: 1,
        page_size: 10,
        flow_id: null,
        customer_id: null
      },
      total: null,
      oldTableData: [],
      tableLoading: false,
      createTableData: [],
      is_flow: false,
      followFormVisible: false,
      tmp_follow: {
        action_list: [], // 推进动作数据集合
        resource_list: [], // 推荐资源集合
        customer_info_flow_id: null,
        follow_time: null,
        opposite_person: null,
        is_policy_decision: null,
        phone: null,
        remarks: null,
        communication_plan: null,
        achievements: null,
        analysis: null,
        reasons_for_recommendation: null,
        whether_remove: true,
        url_list: []
      },
      tmp_index: null,
      followRules: {
        follow_time: [
          { required: true, message: '请输入选择时间', trigger: 'change' }
        ],
        achievements: [
          { required: true, message: '请输入达成成果', trigger: 'blur' }
        ],
        opposite_person: [
          { required: true, message: '请输入对接人名称', trigger: 'blur' }
        ],
        is_policy_decision: [
          { required: true, message: '请选择有无决策权', trigger: 'change' }
        ]
      },
      test: true,
      is_edit: false,
      data_id: null,
      show_submit: true, // 是否显示提交按钮
      show_save: true, // 是否显示保存草稿箱按钮
      show_addBox: true, // 是否显示添加功能
      show_remove: false, // 是否显示删除按钮
      showActualDelete: false, // 是否显示彻底删除按钮
      dialogFormVisible: false, // 驳回或通过显示的对话框
      is_adopt: true, // 是否是点击通过
      form: {
        opinion: null
      }, // 填写的意见
      showCustomerEditSave: false, // 是否显示客户修改的保存按钮
      showCustomerEditSubmit: false, // 是否显示客户修改的提交按钮
      showCustomerEditRemove: false, // 是否显示客户修改的删除按钮
      showCustomerEditAdopt: false, // 是否显示客户修改的通过按钮
      showCustomerEditActualDelete: false, // 是否显示客户修改的彻底删除按钮
      showCustomerEditReject: false, // 是否显示客户修改的驳回按钮
      editInfo: false, // 是否是修改信息
      editCanCheck: false, // 修改信息是否可以审批
      changeDataTable: [], // 有改动的表格数据
      changeTableLoading: false,
      putStorageData: [],
      putStorageTableLoading: false,
      linkUserData: [],
      linkUserTableLoading: false,
      linkUserDialogVisible: false,
      putStorageDialogVisible: false,
      // 联系人信息
      linkUser: {
        name: null,
        dept: null,
        post: null,
        phone: null,
        level: null,
        birthday: null,
        hobbies: null,
        commemoration_day: null,
        remark: null
      },
      // 入库信息
      putStorage: {
        company_head: null,
        time: null,
        login_account: null,
        password: null,
        link_user: null,
        phone: null,
        email: null,
        website: null
      },
      linkUserEdit: false, // 是否是修改联系人信息
      putStorageEdit: false, // 是否是修改入库信息
      putStorageFormRules: {
        company_head: [
          { required: true, message: '请选择抬头', trigger: 'change' }
        ],
        login_account: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        website: [
          { required: true, message: '请输入网址', trigger: 'blur' }
        ]
      },
      linkUserFormRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      },
      tmpIndex: null,
      companyArr: [],
      groupArr: [],
      customerTypes: [],
      flag: false,
      contactSelectLoading: false,
      tmpCustomerId: null,
      params: null,
    }
  },
  components: { AddCustomerFollowDialog, flowCheckHistory },
  computed: {
    // 用户ID
    userId() {
      return this.$store.state.user.id
    }
  },
  async created() {
    if (this.$route.query.uuid) {
      const uuid = this.$route.query.uuid
      const params = this.$store.state.keep.pageParamsMap.get(uuid)
      this.params = params
      console.log(params)
      if (this.params.flow_id || this.params.handle_param) {
        this.formLoading = true
        const tmp = this.params.flow_id ? this.params.flow_id : this.params.handle_param.id
        if (this.params.handle_param.flow_type == 4) {
          await getCustomerFlowInfo({ id: tmp }).then(
            res => {
              this.customer = res.data
              this.putStorageData = Object.assign([], res.data.putStorageList)
              this.linkUserData = Object.assign([], res.data.contactsList)
              this.formLoading = false
              this.created = 0
              this.is_flow = true
            }
          ).catch(
            () => {
              this.formLoading = false
            }
          )
        } else if (this.params.handle_param.flow_type == 7) {
          await getEditInfo({ flow_id: tmp }).then(
            res => {
              this.customer = res.data
              this.putStorageData = Object.assign([], res.data.putStorageList)
              this.linkUserData = Object.assign([], res.data.contactsList)
              this.formLoading = false
              this.created = 0
              this.is_flow = true
              this.editCanCheck = res.data.check
            }
          ).catch(() => {
            this.formLoading = false
          })
        }
      } else if (this.params.customer_id) {
        this.formLoading = true
        await getCustomerInfo({ id: this.params.customer_id }).then(
          res => {
            this.customer = Object.assign({}, res.data)
            this.customer.put_storage_modify = 0
            this.customer.contact_modify = 0
            this.putStorageData = Object.assign([], res.data.putStorageList)
            this.linkUserData = Object.assign([], res.data.contactsList)
            this.customer.id = null
            this.customer.customer_id = res.data.id
            this.formLoading = false
            this.created = 0
          }
        ).catch(
          () => {
            this.formLoading = false
          }
        )
      }
      if (this.params.handle_param && this.params.handle_param.wf_data_id) {
        this.data_id = this.params.handle_param.wf_data_id
      }
      // 如果没有禁用表单
      if (!this.params.disabled) {
        this.form_disabled = false
      }
      // 如果是从修改客户基本信息按钮过来的
      if (this.params.edit) {
        this.showCustomerEditSave = true
        this.showCustomerEditSubmit = true
      }
      if (this.params.handle_param && this.params.handle_param.type) {
        if (this.params.handle_param.type == 1) {
          if (this.params.handle_param.from && this.params.handle_param.from == 4) {
            if (this.params.handle_param.flow_type == 4) {
              this.show_remove = true
              this.show_save = false
            } else if (this.params.handle_param.flow_type == 7) {
              this.show_addBox = false
              this.show_save = false
              this.show_submit = false
              this.showCustomerEditRemove = true
              this.showCustomerEditSave = true
              this.showCustomerEditSubmit = true
            }
          }
          if (this.params.handle_param.from && this.params.handle_param.from == 5) {
            if (this.params.handle_param.flow_type == 4) {
              this.show_remove = true
              this.show_save = true
            } else if (this.params.handle_param.flow_type == 7) {
              this.show_addBox = false
              this.show_submit = false
              this.show_save = false
              this.showCustomerEditRemove = true
              this.showCustomerEditSave = true
              this.showCustomerEditSubmit = true
            }
          }
          if (this.params.handle_param.from && this.params.handle_param.from == 6) {
            if (this.params.handle_param.flow_type == 4) {
              this.showActualDelete = true
              this.show_save = true
            } else if (this.params.handle_param.flow_type == 7) {
              this.show_addBox = false
              this.show_submit = false
              this.show_save = false
              this.showCustomerEditActualDelete = true
              this.showCustomerEditSave = true
              this.showCustomerEditSubmit = true
            }
          }
          if (this.params.handle_param.from && this.params.handle_param.from == 1) {
            if (this.params.handle_param.flow_type == 4) {
              this.showActualDelete = true
              this.show_save = true
            } else if (this.params.handle_param.flow_type == 7) {
              this.show_submit = false
              this.show_save = false
              this.showCustomerEditRemove = true
              this.showCustomerEditSave = true
              this.showCustomerEditSubmit = true
            }
          }
        } else if (this.params.handle_param.type == 2 || this.params.handle_param.type == 3) {
          if (this.params.handle_param.flow_type == 4) {
            this.show_addBox = false
            this.show_save = false
            this.show_submit = false
            this.form_disabled = true
            this.show_remove = false
          } else if (this.params.handle_param.flow_type == 7) {
            this.show_addBox = false
            this.show_submit = false
            this.show_save = false
            this.form_disabled = true
            this.showCustomerEditRemove = false
            this.showCustomerEditAdopt = true
            this.showCustomerEditReject = true
          }
        }
      }
      // if (this.params.handle_param && this.params.handle_param.from && this.params.handle_param.from == 2) {
      //   if (this.params.handle_param && this.params.handle_param.flow_type == 4) {
      //     this.show_remove = true
      //   } else if (this.params.handle_param && this.params.handle_param.flow_type == 7) {
      //     this.showCustomerEditRemove = true
      //   }
      // }
      // 如果是审批
      if (this.params && this.params.handle_param) {
        equalsData(this.customer).then(
          res => {
            this.is_edit = res.data.length > 0
            this.changeDataTable = res.data
          }
        ).catch(() => {
          this.is_edit = false
        })
      }
      if (!this.params.showCreateTAble) {
        this.showCreateTAble = false
      }
    }
    this.initIndustryDict()
    this.initSaleList()
    this.initSelectReasonDict()
    this.initFunnelDict()
    this.initResourcesDict()
    this.initAdvancesDict()
    // this.initHistoryUserArr()
    this.getList()
    this.initCompany()
    this.initUserList()
    this.initGroupArr()
    this.initCustomerTypes()
  },
  mounted() {
    this.view = {
      name: this.$route.name
    }
  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (queryString){
        querySearch({name:queryString}).then(res => {
          let results = [];
          res.data.forEach(item => {
            results.push({value: item.name});
          })
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(results);
          }, 3000 * Math.random());
        });
      }
    },
    handleSelect(item) {
      console.log(item);
    },
    back() {
      this.closeThisPage()
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    followFormClose() {
      this.followFormVisible = false
      this.tmp_follow = {
        action_list: [], // 推进动作数据集合
        resource_list: [], // 推荐资源集合
        customer_info_flow_id: null,
        follow_time: null,
        opposite_person: null,
        is_policy_decision: null,
        phone: null,
        remarks: null,
        communication_plan: null,
        achievements: null,
        analysis: null,
        reasons_for_recommendation: null,
        whether_remove: true,
        url_list: []
      }
      this.tmp_index = null
    },
    addFollow(res) {
      if (this.tmp_index != null) {
        this.createTableData.splice(this.tmp_index, 1, cloneDeep(res))
      } else {
        this.createTableData.push(
          res
        )
      }
      this.$refs.addCustomerFollowDialog.closeVisitDialog()
    },
    dialogCheck() {
      if (this.is_adopt) {
        this.adopt()
      } else {
        this.reject()
      }
      this.dialogFormVisible = false
    },
    // 点击显示通过弹框 flag是否是点击通过类型按钮 is_edit是否是点击修改客户信息的通过或驳回按钮
    showDialog(flag = true, is_edit = false) {
      this.is_adopt = flag
      this.editInfo = is_edit
      this.dialogFormVisible = true
    },
    editFollow(row, index) {
      this.tmp_index = index
      this.tmp_follow = Object.assign({}, row)
      this.followFormVisible = true
    },
    checkDialogClose() {
      this.form.opinion = null
    },
    lookFollow(row) {
      this.tmp_index = -1
      this.tmpCustomerId = row.customer_id
      this.tmp_follow = Object.assign({}, row)
      this.tmp_follow.whether_remove = false
      this.followFormVisible = true
    },
    // 获取跟进记录列表
    getList() {
      this.tableLoading = true
      if (this.is_flow) {
        // 获取待审核的记录
        this.listParams.flow_id = this.params.flow_id ? this.params.flow_id : this.params.handle_param.id
        if (this.params && this.params.handle_param && this.params.handle_param.flow_type == 4) { // 如果是看客户报备
          getFollowTmpList(this.listParams).then(
            res => {
              this.oldTableData = res.data.records
              this.total = res.data.total
              this.tableLoading = false
            }
          ).catch(() => {
            this.tableLoading = false
          })
        } else if (this.params && this.params.handle_param && this.params.handle_param.flow_type == 7) { // 如果是客户基本信息修改审批
          this.listParams.flow_id = null
          this.listParams.customer_id = this.customer.customer_id
          getFollowList(this.listParams).then(
            res => {
              this.oldTableData = res.data.records
              this.total = res.data.total
              this.tableLoading = false
            }
          ).catch(() => {
            this.tableLoading = false
          })
        }
      } else {
        this.listParams.customer_id = this.params.customer_id ? this.params.customer_id : -1
        // 获取用户历史跟进记录
        getFollowList(this.listParams).then(
          res => {
            this.oldTableData = res.data.records
            this.total = res.data.total
            this.tableLoading = false
          }
        ).catch(() => {
          this.tableLoading = false
        })
      }
    },
    // 保存至草稿箱
    saveInfo() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.customer.created = this.customer.created != null && this.customer.created != undefined ? this.customer.created : this.created
          for (let i = 0; i < this.createTableData.length; i++) {
            this.customer.follows.push(
              this.createTableData[i]
            )
          }
          this.customer.follows = this.checkFollows(this.customer.follows)
          // 加入保存的数据
          this.customer.contactsList = this.linkUserData
          this.customer.putStorageList = this.putStorageData
          if (this.customer.contactsList.length === 0) {
            this.$message.error('至少添加一位联系人')
            return
          }
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.params.handle_param && this.params.handle_param.from && this.params.handle_param.from != 6) {
            this.wf_data_id = null
          }
          save(this.customer, { wfData_id: this.data_id }).then(
            res => {
              if (res.data) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.closeThisPage()
              } else {
                this.$message.error('保存失败')
              }
              loading.close()
            }
          ).catch(() => {
            loading.close()
          })
        } else {
          this.$message.error('有必填信息未填写，请仔细检查表格')
          return false
        }
      })
    },
    // 提交审核
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.customer.created = this.customer.created != null && this.customer.created != undefined ? this.customer.created : this.created
            for (let i = 0; i < this.createTableData.length; i++) {
              this.customer.follows.push(
                this.createTableData[i]
              )
            }
            this.customer.follows = this.checkFollows(this.customer.follows)
            this.customer.contactsList = this.linkUserData
            this.customer.putStorageList = this.putStorageData
            if (this.customer.contactsList.length === 0) {
              this.$message.error('至少添加一位联系人')
              return
            }
            const loading = this.$loading({
              lock: true,
              text: '提交中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            saveAndStartFlow(this.customer, { wfData_id: this.data_id }).then(
              res => {
                if (res.data) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  })
                  this.closeThisPage()
                } else {
                  this.$message.error('提交失败')
                }
                loading.close()
              }
            ).catch(() => {
              loading.close()
            })
          }).catch(() => {

          })
        } else {
          this.$message.error('有必填信息未填写，请仔细检查表格')
          return false
        }
      })
    },
    // 通过
    adopt() {
      if (this.is_edit) {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (!this.editInfo) {
          getFlowIsEnd({ id: this.customer.id }).then(
            res => {
              if (res.data) {
                loading.close()
                this.dialogVisible = true
              } else {
                loading.close()
                this.check(true, false)
              }
            }
          )
        } else {
          this.editCheck(true)
        }
      } else {
        this.check(true, false)
      }
    },
    // 驳回
    reject() {
      if (this.editInfo) {
        this.editCheck()
      } else {
        this.check(false, true)
      }
    },
    // 添加记录点击方法
    addTable() {
      this.followFormVisible = true
      if (this.customer.customer_id) {
        this.tmpCustomerId = this.customer.customer_id
      } else {
        this.tmpCustomerId = -1
      }
    },
    // 删除表格记录方法
    removeTable(index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.createTableData.splice(index, 1)
      }).catch(() => {

      })
    },
    // 初始化行业字典
    initIndustryDict() {
      list_all3rd_bycode({ code: 'khxg-hy' }).then(
        res => {
          this.industry_dict = res.data.map(item => (
            {
              id: item.id,
              name: item.name
            }
          ))
        }
      )
    },
    // 初始化销售漏斗字典
    initFunnelDict() {
      list_all3rd_bycode({ code: 'khxg-xsld' }).then(
        res => {
          this.funnel_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 初始化选择原因字典
    initSelectReasonDict() {
      list_all3rd_bycode({ code: 'khxg-xzyy' }).then(
        res => {
          this.select_reason_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 初始化推荐资源字典
    initResourcesDict() {
      list_all3rd_bycode({ code: 'khxg-tjzy' }).then(
        res => {
          this.resources_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 初始化销售人员列表
    initSaleList() {
      if (this.params.handle_param || this.params.customer_id) {
        this.sale_list.push(
          {
            id: this.customer.maintenance_staff_id,
            name: this.customer.maintenance_staff_name
          }
        )
        // } else if (this.params.edit) {
        //   getSubordinateUser().then(
        //     res => {
        //       this.salasList = res.data.map(
        //         item => (
        //           {
        //             id: item.id,
        //             name: item.name
        //           }
        //         )
        //       )
        //     }
        //   )
      } else {
        this.sale_list.push(
          {
            id: this.$store.state.user.id,
            name: this.$store.state.user.name
          }
        )
      }
      if (this.sale_list.find(item => item.id == this.userId) != undefined) {
        this.customer.maintenance_staff_id = this.userId
      }
    },
    // 初始化推进动作字典
    initAdvancesDict() {
      list_all3rd_bycode({ code: 'khxg-tjdz' }).then(
        res => {
          this.advances_dict = res.data.map(
            item => (
              {
                id: item.id,
                name: item.name
              }
            )
          )
        }
      )
    },
    // 关闭页面
    closeThisPage() {
      this.$store.dispatch('tagsView/closePage', this.view.name)
    },
    // 审批方法
    check(isCover = false, isReturn = false) {
      this.dialogVisible = false
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.customer.follows = this.checkFollows(this.customer.follows)
      check(this.customer, { isCover: isCover, isReturn: isReturn, opinion: this.form.opinion }).then(
        res => {
          if (res.data) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    checkFollows(follows) {
      var arr = []
      for (let i = 0; i < follows.length; i++) {
        const tmp = follows[i]
        var flag = false
        for (const key in tmp) {
          if (key == 'whether_remove') {
            continue
          } else {
            if (tmp[key]) {
              if (Array.isArray(tmp[key])) {
                if (tmp[key].length > 0) {
                  flag = true
                  break
                }
              } else {
                flag = true
                break
              }
            }
          }
        }
        if (flag) {
          arr.push(tmp)
        }
      }
      return arr
    },
    remove() {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        remove({ flow_id: this.customer.id, wfData_id: this.data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
            this.closeThisPage()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    actualDelete() {
      this.$confirm('彻底删除将无法找回,确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        actualDelete({ flow_id: this.customer.id, wfData_id: this.data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
            this.closeThisPage()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    // 修改客户信息保存到草稿箱
    saveDrafts() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.customer.contactsList = this.linkUserData
          this.customer.putStorageList = this.putStorageData
          const loading = this.$loading({
            lock: true,
            text: '保存中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.params.handle_param && this.params.handle_param.from && this.params.handle_param.from != 6) {
            this.wf_data_id = null
          }
          saveDrafts(this.customer, { wfData_id: this.data_id }).then(
            res => {
              if (res.data) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.closeThisPage()
              } else {
                this.$message.error('保存失败')
              }
              loading.close()
            }
          ).catch(() => {
            loading.close()
          })
        } else {
          this.$message.error('有必填信息未填写，请仔细检查表格')
          return false
        }
      })
    },
    // 修改客户信息删除方法
    editRemove() {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        editRemove({ flow_id: this.customer.id, wfData_id: this.data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
            this.closeThisPage()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    // 修改客户信息彻底删除方法
    editActualDelete() {
      this.$confirm('彻底删除将无法找回,确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        editActualDelete({ flow_id: this.customer.id, wfData_id: this.data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
            this.closeThisPage()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    // 修改客户信息提交
    editSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // this.customer.created = this.customer.created != null && this.customer.created != undefined ? this.customer.created : this.created
            // for (let i = 0; i < this.createTableData.length; i++) {
            //   this.customer.follows.push(
            //     this.createTableData[i]
            //   )
            // }
            // this.customer.follows = this.checkFollows(this.customer.follows)
            this.customer.contactsList = this.linkUserData
            this.customer.putStorageList = this.putStorageData
            const loading = this.$loading({
              lock: true,
              text: '提交中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            editSaveAndStartFlow(this.customer, { wfData_id: this.data_id }).then(
              res => {
                if (res.data) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  })
                  this.closeThisPage()
                } else {
                  this.$message.error('提交失败')
                }
                loading.close()
              }
            ).catch(() => {
              loading.close()
            })
          }).catch(() => {

          })
        } else {
          this.$message.error('有必填信息未填写，请仔细检查表格')
          return false
        }
      })
    },
    // 修改客户信息审核
    editCheck(isReturn = false) {
      this.dialogVisible = false
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      editCheck(this.customer, { isReturn: isReturn, opinion: this.form.opinion }).then(
        res => {
          if (res.data) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    // 显示联系人弹出框
    showLinkUserAdd() {
      this.flag = true
      this.linkUserDialogVisible = true
      this.$nextTick(() => {
        this.$refs.linkUserForm.clearValidate()
      })
    },
    // 显示入库信息弹出框
    showPutStorageAdd() {
      this.putStorageDialogVisible = true
      this.$nextTick(() => {
        this.$refs.putStorageForm.clearValidate()
      })
    },
    // 显示联系人编辑框
    showLinkUserEdit(row, index, flag) {
      this.flag = flag
      this.tmpIndex = index
      this.linkUserDialogVisible = true
      this.linkUserEdit = true
      this.linkUser = Object.assign({}, row)
      this.$nextTick(() => {
        this.$refs.linkUserForm.clearValidate()
      })
    },
    // 显示入库信息编辑框
    showPutStorageEdit(row, index) {
      this.tmpIndex = index
      this.putStorageDialogVisible = true
      this.putStorageEdit = true
      this.putStorage = Object.assign({}, row)
      this.$nextTick(() => {
        this.$refs.putStorageForm.clearValidate()
      })
    },
    // 保存联系人信息
    saveLinkUser() {
      this.$refs['linkUserForm'].validate((valid) => {
        if (valid) {
          if (this.linkUserEdit) {
            this.linkUserData.splice(this.tmpIndex, 1, Object.assign({ can_look: true }, this.linkUser))
          } else {
            this.linkUserData.push(
              Object.assign({ can_look: true }, this.linkUser)
            )
          }
          this.customer.contact_modify = 1
          this.linkUserDialogVisible = false
        }
      })
    },
    // 保存入库信息
    savePutStorage() {
      this.$refs['putStorageForm'].validate((valid) => {
        if (valid) {
          if (this.putStorageEdit) {
            this.putStorageData.splice(this.tmpIndex, 1, Object.assign({}, this.putStorage))
          } else {
            this.putStorageData.push(
              this.putStorage
            )
          }
          this.customer.put_storage_modify = 1
          this.putStorageDialogVisible = false
        }
      })
    },
    // 关闭入库信息弹框
    closePutStorageDialog() {
      this.putStorageEdit = false
      this.putStorage = {
        company_head: null,
        time: null,
        login_account: null,
        password: null,
        link_user: null,
        phone: null,
        email: null
      }
    },
    // 关闭联系人弹框
    closeLinkUserDialog() {
      this.linkUserEdit = false
      this.linkUser = {
        name: null,
        dept: null,
        post: null,
        phone: null,
        level: null,
        birthday: null,
        hobbies: null,
        commemoration_day: null,
        remark: null
      }
    },
    removePutStorage(index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putStorageData.splice(index, 1)
        this.customer.put_storage_modify = 1
      }).catch(() => {

      })
    },
    removeLinkUser(index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.linkUserData.splice(index, 1)
        this.customer.contact_modify = 1
      }).catch(() => {

      })
    },
    // 初始化历史对接人员
    // initHistoryUserArr() {
    //   if (this.customer.customer_id) {
    //     getHistoryUser({ customer_id: this.customer.customer_id }).then(
    //       res => {
    //         this.opposite_person_arr = res.data
    //       }
    //     )
    //   }
    // },
    /**
     * 初始化公司数据
     */
    initCompany() {
      get_company().then(
        res => {
          this.companyArr = res.data
        }
      )
    },
    /**
     * 初始化用户数据
     */
    initUserList() {
      allList().then(res => {
        this.user_list = res.data
      })
    },
    /**
     * 初始化所属集团数据
     */
    initGroupArr() {
      list_all3rd_bycode({ code: 'khxg-ssjt' }).then(res => {
        this.groupArr = res.data
      })
    },
    initCustomerTypes() {
      listCustomerTypes().then(res => {
        this.customerTypes = res.data
      })
    },
    getContact(id) {
      this.opposite_person_arr = []
      if (id) {
        this.contactSelectLoading = true
        getContactById({ id }).then(res => {
          this.contactSelectLoading = false
          this.opposite_person_arr = this.opposite_person_arr.concat(res.data)
        })
      }
      this.linkUserData.forEach(item => {
        if (this.opposite_person_arr.find(tmp => tmp === item.name) === undefined) {
          this.opposite_person_arr.push(item.name)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mailTable {
  width: 80%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  width: 400px;
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 10px auto;
}

.tip {
  color: red;
}

.textarea-box {
  padding: 10px !important;
}

.follow_table {
  margin-top: 20px;
}

.button_group {
  width: 80%;
  margin: 0 auto 10px auto;
}

.no_last {
  padding-top: 37px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

.error_box {
  margin-bottom: 22px;
}

.button_box {
  text-align: center;
  margin-top: -10px;
  padding-bottom: 10px;
}

/deep/ .el-dialog__title {
  font-size: 14px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
}

.table_data {
  width: 80%;
  margin: 0 auto;
}

.el-pagination {
  margin: 10px 0;
}

.custom-footer button {
  margin: 5px;
}

/deep/ .old_data {
  background-color: #f0f9eb;
}

/deep/ .new_data {
  background-color: oldlace;
}

.title_td {
  background: #F5F7FA;
  font-weight: bold;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

//.putStorageForm .column{
//  width: 230px !important;
//}
</style>
